<template>
  <div class="lb-table" ref="lbTableBg">
    <img src="../../../assets/imgs/left/tableBg.png" />
    <div class="lb-table-container">
      <div class="lb-table-title" ref="lbTableTitle">
        <div class="title" v-for="(item,index) in tbTitle" :key="index" ref="tbTitle">{{item}}</div>
      </div>
      <div class="lb-table-content" v-for="(item,index) in data" :key="index" ref="tableContent">
        <div class="content-1" ref="tbContent1">
          <div class="text-bg">{{item.base}}</div>
        </div>
        <div class="content-2" ref="tbContent2">
          <tableNumber :params="item.questionNum" ref="tableCell"></tableNumber>
        </div>
        <div class="content-2" ref="tbContent2">
          <tableNumber :params="item.haveDeal" ref="tableCell"></tableNumber>
          <img src="../../../assets/imgs/left/up.png" v-if="item.tag == 'up'" />
          <img
                  src="../../../assets/imgs/left/down.png"
                  v-if="item.tag == 'down'"
                  style="transform:rotate(180deg)"
          />
        </div>
<!--        <div class="content-2" ref="tbContent2">-->
<!--          <tableNumber :params="item.noDeal" ref="tableCell"></tableNumber>-->
<!--        </div>-->
<!--        <div class="content-3" :class="item.tag" v-if="item.tag">-->
<!--          <tableNumber :params="item.scale" ref="tableCell"></tableNumber>%-->
<!--          <img src="../../../assets/imgs/left/up.png" v-if="item.tag == 'up'" />-->
<!--          <img-->
<!--            src="../../../assets/imgs/left/down.png"-->
<!--            v-if="item.tag == 'down'"-->
<!--            style="transform:rotate(180deg)"-->
<!--          />-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import tableNumber from './tableNumber'
export default {
  components: {
    tableNumber
  },
  data() {
    return {}
  },
  props: ['data', 'tbTitle', 'tbStyle'],
  created() {},
  mounted() {
    // this.handleStyle()
  },
  computed: {},
  watch: {},
  methods: {
    handleStyle() {
      let tbTitleList = this.$refs.tbTitle
      tbTitleList.map((item, index) => {
        item.style.width = this.tbStyle.title2Width
      })
      tbTitleList[0].style.width = this.tbStyle.title1Width
      tbTitleList[0].style.marginRight = '10px'

      let tbContent2List = this.$refs.tbContent2
      tbContent2List.map((item, index) => {
        item.style.width = this.tbStyle.title2Width
      })
      let tbContent1List = this.$refs.tbContent1
      tbContent1List.map((item, index) => {
        item.style.width = this.tbStyle.title1Width
      })
    },
    init() {
      let tl = new TimelineMax({})
      let lbTableBg = TweenMax.from(this.$refs.lbTableBg, 0.1, {
        opacity: 0
      })
      let lbTableTitle = TweenMax.from(this.$refs.lbTableTitle, 0.5, {
        transform: 'scaleY(0)',
        opacity: 0,
        ease: Back.easeIn
      })
      tl.add(lbTableBg, 'start').add(lbTableTitle, 'start+=0.3')

      let tableContentlist = this.$refs.tableContent
      let len = this.$refs.tableContent.length
      let lines1 = {}
      for (let i = 0; i < len; i++) {
        lines1[`line${i + 1}`] = TweenMax.from(tableContentlist[i], 0.5, {
          transform: 'scaleY(0)',
          opacity: 0,
          ease: Back.easeIn
        })
      }

      for (let i = 0; i < len; i++) {
        tl.add(lines1[`line${i + 1}`], 'start+=' + (i * 0.2 + 0.3))
      }
      let tableCellList = this.$refs.tableCell
      for (let i = 0; i < tableCellList.length; i++) {
        tl.add(tableCellList[i].init(), 'start+=' + (i * 0.1 + 0.2))
      }
      tl.add(this.handleStyle, 'start+=0.2')
      return tl
    }
  }
}
</script>
<style lang='scss' scoped>
.lb-table {
  padding-top: 10px;
  .lb-table-container {
    width: 100%;
    height: 220px;
    padding: 0 20px 0 0;
    top: 35px;
    margin-top: -10px;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(3, 94, 240, 0.1) 100%
    );
    .lb-table-title {
      width: 100%;
      height: 30px;
      background: #030c31;
      display: flex;
      color: #fff;
      font-size: 14px;
      font-family: 'HYQiHeiY2-35J';
      line-height: 30px;
      text-align: center;
    }
    .lb-table-content {
      width: 100%;
      height: 30px;
      line-height: 28px;
      text-align: center;
      display: flex;
      margin-top: 5px;
      .content-1 {
        box-sizing: border-box;
        // border: 4px solid #030c31;
        background: #030c31;
        border-right: none;
        width: 36%;
        margin-right: 10px;
        padding: 2px 0 2px 5px;
        font-size: 16px;
        font-family: 'HYQiHeiY2-35J';
        .text-bg {
          width: 100%;
          height: 100%;
          background: linear-gradient(
            to right,
            rgba(0, 247, 250, 0.2) 0,
            rgba(255, 255, 255, 0) 100%
          );
          color: #8a99ac;
        }
      }
      .content-2 {
        width: 15%;
        background: #041d32;
        // display: flex;
      }
      .content-3 {
        width: 19%;
        background: #041d32;
        font-size: 14px;
        font-family: 'Acens';
      }
      .up {
        color: #ea2346;
        .table-item-value {
          color: #ea2346 !important;
          text-shadow: 2px 0 3px rgba(234, 35, 70, 0.4),
            -2px 0 3px rgba(234, 35, 70, 0.4);
        }
      }
      .down {
        color: #2af9fa;
        .table-item-value {
          color: #2af9fa !important;
          text-shadow: 2px 0 3px rgba(42, 249, 250, 0.4),
            -2px 0 3px rgba(42, 249, 250, 0.4);
        }
      }
    }
  }
}
</style>